<template>
  <div style="width:888px;">
    <div class="right_div_title">
      <p>我的关注</p>
    </div>
    <el-card v-if="userList.length === 0">
      <el-empty description="您并未有关注任何人" />
    </el-card>
    <el-card v-for="user in userList" :key="user.id">
      <el-col class="avatar" :span="2">
        <router-link :to="{name:'User', params:{ id: user.id }}">
          <el-avatar :src="user.avatar" :size="60" />
        </router-link>
      </el-col>
      <el-col class="username" :span="5">
        {{ user.username }}
      </el-col>
      <el-col :span="15" style="text-align:right">
        <el-tooltip class="item" effect="dark" content="取消关注" placement="bottom">
          <el-button type="primary" class="el-icon-check" @click="cancelFocus(user_id,user.id)" />
        </el-tooltip>
      </el-col>
    </el-card>
  </div>
</template>

<script>
import { findMyFocusUserList, cancelFocus } from '@/api/user'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      userList: []
    }
  },
  computed: {
    ...mapGetters([
      'user_id'
    ])
  },
  mounted() {
    this.findMyFocusUserList()
  },
  methods: {
    findMyFocusUserList() {
      findMyFocusUserList({ userId: this.user_id }).then((res) => {
        this.userList = res.data
      })
    },
    cancelFocus(userId, authorId) {
      cancelFocus({ userId: userId, authorId: authorId })
      this.findMyFocusUserList()
    }
  }
}
</script>

<style scoped>
.right_div_title p {
    height: 48px;
    width: 100%;
    line-height: 48px;
    font-size: 16px;
    color: #999;
    background: #fff;
    border-radius: 10px;
    text-indent: 30px;
}
.avatar{
  height: 70px;
}
.username{
  padding-top: 5px;
}
</style>
